import React, { useRef, useState, useEffect } from 'react';
import { Tag, Popover, Button } from 'antd';
import CommonTable from '@/components/Table';
import SearchBar from './serchBar';
import AddForm from './AddForm';
import { addQuestions, delQuestions, getQuestions, updateQuestions, uploadQuestions } from '@/api/exam/question';
import MarkDownComponent from '@/components/markdown';
import EditForm from './EditForm';
import { Questions } from '@/api/question';

const columns = [
  {
    title: '题型',
    dataIndex: 'type',
    key: 'type',
    width: '80px'
  },
  {
    title: '难度',
    width: '80px',
    dataIndex: 'difficulty',
    key: 'difficulty'
  },
  {
    title: '标签',
    dataIndex: 'tags',
    width: '100px',
    key: 'tags',
    render: (tags: any) => (
      <>
        {(tags ? JSON.parse(tags) : []).map((tag: string) => (
          <Tag key={tag}>{tag}</Tag>
        ))}
      </>
    )
  },
  {
    title: '题目',
    width: '300px',
    dataIndex: 'question',
    key: 'question'
  },
  {
    title: '题目描述',
    width: '150px',
    dataIndex: 'description',
    key: 'description',
    render: (text: string, v: any) =>
      text?.length > 10 ? (
        <Popover content={<MarkDownComponent text={text} />}>
          <Button type="link">查看</Button>
        </Popover>
      ) : (
        text
      )
  },
  {
    title: '选项',
    dataIndex: 'options',
    key: 'options',
    width: '200px',
    render: (options: any) => (
      <>
        {(options ? JSON.parse(options) : []).map((option: any, index: number) => (
          <div key={index}>{`${String.fromCharCode(65 + index)}. ${option}`}</div>
        ))}
      </>
    )
  },
  {
    title: '答案',
    width: '200px',
    dataIndex: 'answer',
    key: 'answer',
    render: (text: string, v: any) =>
      text?.length > 40 ? (
        <Popover content={<MarkDownComponent text={text} />}>
          <Button type="link">查看</Button>
        </Popover>
      ) : (
        text
      )
  },
  {
    title: '解析',
    width: '150px',
    dataIndex: 'analysis',
    key: 'analysis',
    render: (text: string, v: any) =>
      text?.length > 40 ? (
        <Popover content={<MarkDownComponent text={text} />}>
          <Button type="link">查看</Button>
        </Popover>
      ) : (
        text
      )
  }
];

export default function QuestionTable() {
  const [form2, setAddForm] = useState();
  const [record, setRecord] = useState<Questions>();
  const handleChange = (data: any[]) => {};
  const handleRecordChange = (data: any, form: any) => {
    setRecord(data);
    setAddForm(form);
  };

  useEffect(() => {
    console.log(form2);
  }, [form2]);

  return (
    <>
      <CommonTable
        title="题目"
        SerchBar={<SearchBar />}
        getDataApi={getQuestions}
        deleteApi={delQuestions}
        addDataApi={addQuestions}
        updateDataApi={updateQuestions}
        uploadApi={uploadQuestions}
        columns={columns}
        onChange={handleChange}
        setAddForm={setAddForm}
        onRecordChange={handleRecordChange}
        AddForm={<AddForm formRef={form2} />}
        EditForm={<EditForm formRef={form2} record={record} />}
      />
    </>
  );
}
